<template>
	<view>
		<!-- 头部标题 -->
		<view class="cu-bar bg-white">
			<view class="action sub-title">
				<text class="text-xl text-bold text-green">发布作业</text>
				<text class="bg-green"></text>
				<!-- last-child选择器-->
			</view>
		</view>
		<!-- 头部标题 end -->
		
		<!-- 作业描述 -->
		
		<view class="cu-form-group ">
			<view class="title">描述</view>
			<input placeholder="描述一下作业内容" v-model="describe"></input>
		</view>
		
		<view class="cu-form-group ">
			<view class="title">题量</view>
			<input placeholder="共多少到题" type="number" maxlength="2" v-model="questionsNum"></input>
		</view>
		
		<view class="cu-form-group">
			<view class="title">结束时间</view>
			<picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="DateChange">
				<view class="picker">
					{{date}}
				</view>
			</picker>
		</view>
		
	<view class="cu-form-group ">
		<view class="title">加分</view>
		<picker @change="PickerChange" :value="index" :range="picker">
			<view class="picker">
				{{index>-1?picker[index]:'选择加分'}}
			</view>
		</picker>
	</view>
	
	
	<view class="cu-bar bg-white ">
		<view class="action">
			图片上传
		</view>
		<view class="action">
			{{imgList.length}}/1
		</view>
	</view>
	
	<view class="cu-form-group">
		<view class="grid col-4 grid-square flex-sub">
			<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
			 <image :src="imgList[index]" mode="aspectFill"></image>
				<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
					<text class='cuIcon-close'></text>
				</view>
			</view>
			<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
				<text class='cuIcon-cameraadd'></text>
			</view>
		</view>
	</view>
	
	<!-- 提交 -->
	<view class="padding-xl">
		<button  @click.native="make()" class="cu-btn block bg-gradual-green margin-tb-sm lg">
			<text :class="  statusButton ? 'cuIconfont-spin cuIcon-loading2' : 'cuIconfont-spin' "></text> {{statusButton ? '发布中...' : '创建'}}
			</button>
	</view>
		
		<!-- end -->
		
		
		
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				classId:'',//课堂id
				index: -1,//加分下标
				date: '请选择结束时间',
				picker: ['1分', '5分', '10分'],
				imgList: [],//图片
				describe:"",//描述
				questionsNum:"",//题量
				statusButton:false//按钮状态(是否正在提交中...)
			}
		},
		methods: {
			//结束时间
			DateChange(e) {
				this.date = e.detail.value
			},
			//加分
			PickerChange(e) {
				this.index = e.detail.value
			},
			
			// 图片选择
			ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这张照片吗？',
					cancelText: '再看看',
					confirmText: '再见',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			
			// 点击提交发布作业
			make:function(){
				
				var describe = _this.describe;//描述
				var questionsNum = _this.questionsNum;//题量
				var time = _this.date;//时间
				var picker = _this.picker[_this.index];//分数
				var imgList = _this.imgList//图片
				
				if(describe == "" || describe == null){
					uni.showToast({
						title:"请输入描述",
						icon:"none",
						duration:1000
					})
					return;
				}
				
				if(questionsNum == "" || questionsNum == null){
					uni.showToast({
						title:"题量不能为空！",
						icon:"none",
						duration:1000
					})
					return;
				}
				
				if(time == "请选择结束时间"){
					uni.showToast({
						title:"请选择时间！",
						icon:"none",
						duration:1000
					})
					return;
				}
				
				if(_this.index == -1){
					uni.showToast({
						title:"请选择多少分",
						icon:"none",
						duration:1000
					})
					return;
				}
				
				if(imgList == "" || imgList == null){
					uni.showToast({
						title:"至少上传一张照片！",
						icon:"none",
						duration:1000
					})
					return;
				}
				
				var pickerNum ;
				if(picker == "1分"){
					pickerNum = 1;
				}else if(picker == "5分"){
					pickerNum = 5;
				}else if(picker == "10分"){
					pickerNum = 10;
				}
				
				_this.statusButton = true;//改变状态
				
				// 上传图片
				 uni.uploadFile({
						url: _this.api +"upload/postfile", //仅为示例，非真实的接口地址
						filePath: imgList[0],
						name: 'file',
						success: (uploadFileRes) => {
							//数据上传
							console.log(uploadFileRes.data);
							_this.uploadData(describe,questionsNum,time,pickerNum,uploadFileRes.data);
						},
						fail:(err)=>{
							uni.showToast({
								title:"请稍后在试！图片上传失败！",
								duration:1000,
								icon:"none"
							})
						}
				});
				
				
			},
			
			
			uploadData(describe,questionsNum,time,pickerNum,imgList){
				// 发布
				uni.request({
					url:_this.api + "work/create",
					method:"POST",
					header:{
						"content-type":"application/x-www-form-urlencoded"
					},
					data:{
						clazzId:_this.classId,
						content:describe,
						questionNum:questionsNum,
						endTime:time,
						score:pickerNum,
						img:imgList,
						uid:uni.getStorageSync("user_info").id//获取用户id
					},
					success: (res) => {
						_this.statusButton = false;//取消上传状态
						
						// 初始化数据
						_this.describe = "",
						_this.questionsNum = "",
						_this.date = "请选择结束时间";
						_this.index = -1;
						_this.imgList = [];
						
						uni.showToast({
							title:"发布成功！",
							icon:"none",
							duration:1000
						})
					},
					fail: (err) => {
						uni.showToast({
							title:"发布失败！",
							icon:"none",
							duration:1000
						})
					}
				})
			}
		},
		onLoad(optins) {
			_this = this;
			_this.classId = optins.classId;
		}
	}
</script>

<style>

</style>
